<template>
  <el-container class="container">
    <!-- 头部 -->
    <el-header>
      <div style="text-align: center">
              <img
                src="../assets/img/hms.png"
                height="55"
                width="70"
              />
              <div style="margin-left:20px;">HMS后台管理系统</div>
            </div>
      <span>
        <div class="right-menu">
          <span><font color="red">渣渣服务器,轻点(●ˇ∀ˇ●)</font></span>
          <el-dropdown class="avatar-container" trigger="click">
            <div class="avatar-wrapper">
              <img
                src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif"
                height="100"
                width="100"
                class="user-avatar"
              />
              <i class="el-icon-caret-bottom" />
            </div>
            <el-dropdown-menu slot="dropdown" class="user-dropdown">
              <router-link to="/">
                <el-dropdown-item>首页</el-dropdown-item>
              </router-link>
                <el-dropdown-item divided>
                <span style="display:block;" @click="screenfull">{{ isFullscreen === true ?'退出全屏':'全屏' }}</span>
              </el-dropdown-item>
              <el-dropdown-item divided>
                <span style="display:block;" @click="openInfo">个人信息</span>
              </el-dropdown-item>
              <el-dropdown-item divided>
                <span style="display:block;" @click="logout">退出</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </span>
    </el-header>
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="this.isClose == false? '200px' : '64px'">
        <div class="toggle-butten" @click="toggleClick">|||</div>
        <el-menu
          background-color="#333744"
          text-color="#fff"
          active-text-color="#409BEF"
          :unique-opened="true"
          :collapse="this.isClose"
          :collapse-transition="false"
          :router="true"
        >
          <el-submenu :index="item.menuUrl" v-for="item in menuList" :key="item.id">
            <template slot="title">
              <i :class="item.menuIcon"></i>
              <span>{{ item.menuTitle }}</span>
            </template>
            <el-menu-item
              :index="childItem.menuUrl"
              v-for="childItem in item.children"
              :key="childItem.id"
            >
              <template slot="title">
                <i :class="childItem.menuIcon"></i>
                <span >{{ childItem.menuTitle }}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 内容 -->
      <el-main>

        <router-view></router-view>
      </el-main>
    </el-container>
      <UserInfo ref="infoRef">
    </UserInfo>
  </el-container>
</template>

<script>
import UserInfo from '../components/UserInfo'
// 导入全屏第三方模块
import screenfull from 'screenfull'

export default {
  data() {
    return {
      menuList: this.$store.getters.menuList,
      isClose: false,
      name: '',
      //全屏
      isFullscreen: false
    }
  },
  components: {
    UserInfo
  },
  created() {
    this.getMenuList(this.menuList)
    this.name = window.sessionStorage.getItem('username')
  },
  methods: {
    logout() {
      this.$api.login.logout().then(res => {
        if (res.code === 401 || res.code === 200) {
          window.sessionStorage.clear()
          this.$router.push('/login')
        }
      })
    },
    getMenuList() {
      this.$api.menu.getMenuList().then(res => {
        if (res.code !== 200) return this.$message.error(res.message)
        this.menuList = res.data
        this.$store.commit('changeMenuList', res.data)
      })
    },
    toggleClick() {
      this.isClose = !this.isClose
    },
    openInfo() {
      this.$refs.infoRef.userInfo = {name: window.sessionStorage.getItem('username'),
                                     userId: window.sessionStorage.getItem('userid')}
      this.$refs.infoRef.isopen = !this.$refs.infoRef.isopen
    },
    // 全屏模式 将方法绑定(点击事件)到页面的元素上即可
    screenfull() {
      screenfull.toggle()
      this.isFullscreen = !this.isFullscreen
    },
    // Esc 全屏监测
    checkFull() {
      let isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled
      if (isFull === undefined) {
          isFull = false
      }
      return isFull
    }
  },
   mounted() {
      window.onresize = () => {
            // 全屏下监控是否按键了ESC
            if (!this.checkFull()) {
              // 退出全屏
              this.isFullscreen = !this.isFullscreen
            }
          }
       }
}
</script>

<style lang="less" scoped>
@import url("//at.alicdn.com/t/font_1560737_0gqjvd4oiq6.css");
.el-header {
  background-color: #373d41;
  display: flex;
  justify-content: space-between;
  padding-left: 0px;
  align-items: center;
  color: #fff;
  font-size: 20px;
  > div {
    display: flex;
    align-items: center;
  }
}

.el-aside {
  background-color: #333744;
}

.el-main {
  background-color: #eee;
  .el-menu {
    border-right: none;
  }
}

.container {
  width: 100%;
  height: 100%;
}

.toggle-butten {
  background-color: #4a5064;
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}
.img {
  cursor: pointer;
  // width: 50px;
  // height: 50px;
  // border-radius: 10px;
}
.right-menu {
  float: right;
  height: 100%;
  line-height: 50px;

  &:focus {
    outline: none;
  }

  .right-menu-item {
    display: inline-block;
    padding: 0 8px;
    height: 100%;
    font-size: 18px;
    color: #5a5e66;
    vertical-align: text-bottom;

    &.hover-effect {
      cursor: pointer;
      // transition: background .3s;

      &:hover {
        background: rgba(0, 0, 0, 0.025);
      }
    }
  }
  .avatar-container {
    margin-right: 30px;

    .avatar-wrapper {
      margin-top: 15px;
      position: relative;

      .user-avatar {
        cursor: pointer;
        width: 50px;
        height: 50px;
        border-radius: 10px;
      }

      .el-icon-caret-bottom {
        cursor: pointer;
        position: absolute;
        right: -20px;
        top: 25px;
        font-size: 12px;
      }
    }
  }
}
</style>
